<template>
	<view class="newcontent">
		<view :class="'zbtt fontsize'+fontsizenub">
			<text>{{name}}</text>
			<text class="more" v-if="navigateId == '4b52a07e81a34d159d5e9e7aafd5d89e'" @click="handleClickMore(navigateId)">更多>></text>
		</view>
		<view v-for="(dataitem,index) in list" :key="index" class="index-item"
				:data-all="dataitem"
				:id="dataitem.id" 
				:data-articleType="dataitem.articleType" 
				:data-link = "dataitem.link"
				v-on:tap="bindClick">
			<view v-if="dataitem.class == 'noimg'" :class="dataitem.class">
				<view :class="'newtitle fontsize'+fontsizenub">{{dataitem.title}}</view>
				<view class="commonshow">
					<view class="seenub"><text class="'nubdata">{{dataitem.uploadTime}}</text></view>
					<view class="seenub" v-if="dataitem.label"><text class="'nubdata">{{dataitem.label}}</text></view>
				</view>
			</view>
			<view v-if="dataitem.class == 'frist-img'" class="oneimg"> 
				<view class="frist-img">
					<view class="firstimgbox">
						<image :src="localurl+dataitem.picture" mode="widthFix"></image>
					</view>
					<view class="fristinfo">
						<view :class="'newtitle fontsize'+fontsizenub">{{dataitem.title}}</view>
						<view class="commonshow">
							<view class="seenub"><text class="'nubdata">{{dataitem.uploadTime}}</text></view>
							<view class="seenub" v-if="dataitem.label"><text class="'nubdata">{{dataitem.label}}</text></view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="dataitem.class == 'oneimg'"  :class="[dataitem.class,'oneimger']">
				<view class=".imgfather">
					<image :src="localurl+dataitem.picture" class="imageonly"/></image>
				</view>
				<view class="oneimgbox">
					<view :class="'newtitle fontsize'+fontsizenub">{{dataitem.title}}</view>
					<view class="commonshow">
						<view class="seenub"><text class="'nubdata">{{dataitem.uploadTime}}</text></view>
						<view class="seenub" v-if="dataitem.label"><text class="'nubdata">{{dataitem.label}}</text></view>
					</view>
				</view>
			</view>
			<view v-if="dataitem.class == 'threeimg'" :class="[dataitem.class]">
				<view :class="'newtitle fontsize'+fontsizenub">{{dataitem.title}}</view>
				<view class="threeimgbox">
					<view class="smbox">
						<image :src="localurl+dataitem.picture"/></image>
					</view>
					<view class="smbox">
						<image :src="localurl+dataitem.picture1"/></image>
					</view>
					<view class="smbox">
						<image :src="localurl+dataitem.picture2"/></image>
					</view>
				</view>
				<view class="commonshow">
					<view class="seenub"><text class="'nubdata">{{dataitem.uploadTime}}</text></view>
					<view class="seenub" v-if="dataitem.label"><text class="'nubdata">{{dataitem.label}}</text></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {common} from '@/common/publish.js';
	import {mapState,mapMutations} from 'vuex';
	export default{
		name: 'uni-index-list',
		props:{
			valuelist:Array,
			name:String,
			navigateId:String
		},
		data(){
			return{
				list:[],
				localurl:common.url,
				num:Math.random()*100,
			}
		},
		mounted(){
			this.handleValueClass()
		},
		// onLoad(){
		// 	this.handleValueClass()
		// },
		methods:{
			//处理对象的class
			handleValueClass(){
				this.valuelist.forEach((v)=>{
					if(v.displayType == '多图'){
						v.class = 'threeimg'
					}else if(v.displayType == '纯文字'){
						v.class = 'noimg' 
					}else if(v.displayType == '单图'){
						v.class = 'oneimg'
					}else if(v.displayType == '广告'){
						v.class = 'frist-img'
					}else{
						v.class = 'noimg' 
					}
					if(v.label.length>7)v.label = v.label.substring(0,6) + '...';
				})
				this.list = this.valuelist;
			},
			//点击事件
			bindClick(e){
				console.log(e)
				let id = e.currentTarget.id
				let articletype = e.currentTarget.dataset.articletype
				let link = e.currentTarget.dataset.link
				this.$emit('click',id,articletype,link,e.currentTarget.dataset.all.title)
			},
			//点击更多，切换到动态
			handleClickMore(navigateId){
				this.$emit('turnDT',navigateId)
			}
		},
		
		computed:{
			...mapState(['fontsizenub'])
		},
		watch:{
			valuelist:function(){
				this.handleValueClass()
			}
		}
	}
</script>

<style lang="scss">
	@import '@/common/publish.scss';
	@include fontsizefn(".zbtt",32upx);
	@include fontsizefn(".newtitle",32upx);
	.nubdata{
		font-size:28upx;
	}
	.zbtt{
		display: flex;
		flex-direction: row ;
		justify-content:space-between;
		margin-right: 13px;
	}
	.more{
		// text-align: right;
		font-size: 28upx;
		padding: 0 20upx;
		color: #aaa;
		margin-top: 4upx;
	}
</style>
